<template>
  <div class="home">
    <div class="back_box" :class="$route.meta.className"> 
      <div class="icon_content icons2" @click="goPage('/')" :class="{icon_content_active:$route.path=='/company'||'/history'}" >企业介绍</div>
      <div class="icon_content icons3" @click="goPage('/consum')" :class="{icon_content_active:$route.path.indexOf('/consum')>-1}">消费金融</div>
      <div class="icon_content icons4" @click="goPage('/brain')" :class="{icon_content_active:$route.path.indexOf('/brain')>-1}">产业互联</div>
        <div class="tittle">{{ $route.meta.tittle }}</div>
      <transition name="fade">
        <router-view />
      </transition>
      <div class="buttom_box">
        <div class="buttom_btn_box">
          <div class="content_box">
            <div class="buttom_menu_content content_width5" v-if="vIfObj.company" @click="goPage('/company')"   :class="{buttom_menu_content_active:$route.path=='/company'}">合作机构</div>
            <div class="buttom_menu_content content_width5" v-if="vIfObj.history" @click="goPage('/history')" :class="{buttom_menu_content_active:$route.path == '/history'}">发展历程</div>
            <div class="buttom_menu_content content_width6" v-if="vIfObj.intelligentSolution" @click="goPage('/consum/IntelligentSolution')" :class="{buttom_menu_content_active:$route.path == '/consum/IntelligentSolution'}">智能化产品开发步骤和方法</div>
            <div class="buttom_menu_content content_width2" v-if="vIfObj.consumption" @click="goPage('/consum/consumption')" :class="{buttom_menu_content_active:$route.path == '/consum/consumption'}">消费金融数字化平台</div>
            <!-- <div class="buttom_menu_content content_width2" @click="goPage('/brain/fuse')" :class="{buttom_menu_content_active:$route.path == '/brain/fuse'}">金融侧数据中心</div> -->
            <div class="buttom_menu_content content_width1" v-if="vIfObj.togeser" @click="goPage('/brain/togeser')"   :class="{buttom_menu_content_active:$route.path=='/brain/togeser'}">消费金融产业互联模式</div>
            <div class="buttom_menu_content content_width2" v-if="vIfObj.fuse" @click="goPage('/brain/fuse')" :class="{buttom_menu_content_active:$route.path == '/brain/fuse'}">融器产业服务体系</div>
            <div class="buttom_menu_content content_width3" v-if="vIfObj.intelligence" @click="goPage('/brain/intelligence')" :class="{buttom_menu_content_active:$route.path == '/brain/intelligence'}" >智能匹配方案</div>
            <div class="buttom_menu_content content_width2" v-if="vIfObj.painpoint" @click="goPage('/brain/painpoint')" :class="{buttom_menu_content_active:$route.path == '/brain/painpoint'}" >产业互联解决方案</div>
            <!-- <div class="buttom_menu_content content_width2" @click="goPage('/brain/fuse')" :class="{buttom_menu_content_active:$route.path == '/brain/fuse'}">产业侧数据中心</div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      tittle: "",
      vIfObj:{
        company:true,
        history:true,
        intelligentSolution:false,
        consumption:false,
        togeser:false,
        fuse:false,
        intelligence:false,
        painpoint:false
      }
    };
  },
  methods: {
    goPage(e) {
      this.$router.push(e);
      if(e == '/'){
        Object.keys(this.vIfObj).forEach(a=>{
          if(a == 'company' || a == 'history'){
              this.vIfObj[a] = true
          }else{
             this.vIfObj[a] = false
          }
        })
      }else if(e == '/consum'){
         Object.keys(this.vIfObj).forEach(a=>{
          if(a == 'intelligentSolution' || a == 'consumption'){
              this.vIfObj[a] = true
          }else{
             this.vIfObj[a] = false
          }
        })
      }else if(e == '/brain'){
         Object.keys(this.vIfObj).forEach(a=>{
          if(a == 'togeser' || a == 'fuse'||a == 'intelligence' || a == 'painpoint'){
              this.vIfObj[a] = true
          }else{
             this.vIfObj[a] = false
          }
        })
      }
    },
  },
};
</script>


<style scoped>
.content_width5{
    width:5.554166666666668vw;
}
.content_width6{
    width:10.554166666666668vw;
}
.icon_content {
  position: absolute;
  cursor: pointer;
  width: 5.989vw;
  height: 2.604vw;
  /* background: linear-gradient(
    180deg,
    #193482 0%,
    rgba(0, 6, 58, 0) 52%,
    #183179 100%
  ); */
  background: url("../assets/img/icon_content.png");
  background-size: 100% 100%;
  font-size: 0.7812vw;
  font-family: HYRuiHuSongW;
  color: #ffffff;
  text-align: center;
  line-height: 2.604vw;
  transition: background .5s;
}
.icon_content:hover{
  background: url("../assets/img/active_icon_content.png");
  background-size: 100% 100%;
  text-shadow: 0 0 .15vw #fff;
}
.icon_content_active{
  background: url("../assets/img/active_icon_content.png");
  background-size: 100% 100%;
  text-shadow: 0 0 .15vw #fff;
}
.icons1{
  top:2.1614583333333335vw;
  left:20.260416666666668vw
}
.icons2{
  top:2.1614583333333335vw;
  left:26.770833333333332vw
}
.icons3{
  top:2.1614583333333335vw;
  left:66.484375vw
}
.icons4{
  top:2.1614583333333335vw;
  left:72.99479166666667vw
}

.tittle {
  width: 18.75vw;
  height: 2.1875vw;
  font-size: 1.5625vw;
  font-family: HYRuiHuSongW;
  color: #5dc5ee;
  line-height: 2.1875vw;
  position: absolute;
  left: 40.651041666666664vw;
  top:2.65625vw;
  text-align: center;
}
.buttom_box{
  position: absolute;
  top: 51.041666666666664vw;
  width: 100vw;
  height: 5.208333333333334vw;
  overflow: hidden;
}
.buttom_btn_box{
  position:absolute;
  top:0;
  width:100vw;
  height:10.416666666666668vw;
  padding-top: 5.208333333333334vw;
  transition: top 1s;
} 
.buttom_btn_box:hover{
  top:-100%;
}
.content_box{
  width: 100vw;
  height: 5.208333333333334vw;
  background: #040321;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_width1{
  width:8.854166666666668vw;
}
.content_width2{
  width:7.8125vw;
}

.content_width3{
  width:5.989583333333334vw;
}
.buttom_menu_content{
  cursor: pointer;
  height:2.604166666666667vw;
  background: url('../assets/img/buttom_btn.png');
  background-size:100% 100% ;
  font-size:0.78125vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right:0.5208333333333333vw;;
  transition: background .5s;
}
.buttom_menu_content_active{
    cursor: pointer;
  height:2.604166666666667vw;
  background: url('../assets/img/buttom_btn_active.png');
  background-size: 100% 100%;
  font-size:0.78125vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right:0.5208333333333333vw;;
  transition: background .5s;
}
.buttom_menu_content:hover{
  background: url('../assets/img/buttom_btn_active.png');
  background-size: 100% 100%;
}

</style>

